<%@ page language="java" session="true" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<jsp:include page="../common/framework/header.jsp" />
<link href="${pageContext.request.contextPath}/static/css/testCase/corecss.css" rel="stylesheet">

<style>
	body{
		font-size:12px;color:#333;font-family:微软雅黑;background-color: #fff;
	}
  .form-inline .form-control {
    width: 100%;
	}
	.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio] {
    margin-top: 2px;
}
.checkbox, .radio {
    margin-top: 5px;
}
a {
    color: #000;
}
A:hover {
    text-decoration: none;
} 



.dtree {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666;
	white-space: nowrap;
}
.dtree img {
	border: 0px;
	vertical-align: middle;
}
.dtree a {
	color: #555;
	text-decoration: none;
}
.dtree a.node, .dtree a.nodeSel {
	white-space: nowrap;
	padding: 1px 2px 1px 2px;
}
.dtree a.node:hover, .dtree a.nodeSel:hover {
	color: #348fe2;
	text-decoration: underline;
}
.dtree a.nodeSel {
	background-color: #c0d2ec;
}
.dtree .clip {
	overflow: hidden;
}


</style>

<div class="container-fluid" style="padding:0 40px;">
    <form id ="openAndEditTestSuiteForm">
		<div class="form-inline row" style="margin-top : 15px;">
	    	<div class="form-group col-sm-12" style="margin-bottom:0px!important;">

	         		<a type="button" title="创建此工作项的副本(包括链接)" style="margin-right : 15px;" class="add_case" id="copyCase" onclick="cloneTestSuite();">
	         				<span class="icon icon-tfs-work-item-copy" style="margin-bottom:3px;"></span>
	         				 克隆
	         		</a>

	         	<hr style="margin-top: 10px;margin-bottom: 10px;">
	         </div>
	     </div>
	     <div class="form-inline row">
	         <div class="form-group col-sm-12" >
				<input type="text" class="  form-control" id="testsuiteName" name="testsuiteName"  placeholder="请输入测试套件名称(必填项)">
	         </div>
	     </div>
    <div class = "row" >
         	<div class="form-group col-sm-6 col-xs-6" >
            	<label class="col-xs-2" style="padding:6px 0 0 0;text-align:right;">指派给:</label>
            	<div class="col-xs-10" style="padding-right:0;">
					<select class="form-control" data-width="100%" id="assignId" name="assignId">
                     </select>
				</div>
         	</div>
         	<div class = "form-group col-sm-6 col-xs-6" >
            	<label class="col-xs-2" style="padding:6px 0 0 0;text-align:right;">状态:</label>
            	<div class="col-xs-10" style="padding-right:0;">
					<select class="form-control" data-width="100%" id="state" name="state">
                         <option value="0">正在计划</option>
						 <option value="1">正在进行</option>
						 <option value="2">已完成</option>
                     </select>
				</div>
			</div>
		</div>

		<div class = "row" >
	    	<div class = "form-group col-sm-12 col-xs-12" style="padding-left:13px;">
	            <label class="col-xs-1" style="padding:6px 0 0 0;text-align:right;">摘要:</label>
	            <div class="col-xs-11" style="padding-right:0;">
					<textarea class="form-control" style = " resize: none;overflow:hidden" rows="4"
            		id = "summary" name = "summary"></textarea>
				</div>
			</div>
		</div>
		<input type ="hidden"   id="testsuiteId" name="testsuiteId">
    </form>
</div>
<div id ="cloneTestSuiteHtml" style="display:none;">
		<form id ="cloneTestSuiteForm">
			<div style="padding: 20px 25px;"><span>创建测试套件的副本：</span></div>
			<div class="row" style="margin:0;padding-right:10px;">
		         <div class = "form-group col-sm-12 col-xs-12">
		            <label class="col-xs-2" style="padding:6px 0 0 0;text-align:right;"><font color=red>*</font>项目:</label>
		            <div class="col-xs-10" style="padding-right:0;">
		            	<select class="form-control" data-width="100%" style="width:360px;" id="projectId" name="projectId" onchange="projectOnchange();">
                     	</select>
		         	</div>
		         </div>
	         </div>
	         <div class="row" style="margin:0;padding-right:10px;">
		         <div class = "form-group col-sm-12 col-xs-12">
		            <label class="col-xs-2" style="padding:6px 0 0 0;text-align:right;"><font color=red>*</font>测试计划:</label>
		            <div class="col-xs-10" style="padding-right:0;">
		            	<select class="form-control" data-width="100%" style="width:360px;" id="testplanId" name="testplanId" onchange="testPlanOnchange();">
                     	</select>
		         	</div>
		         </div>
	         </div>

	         <div class="row" style="margin:0;padding-right:10px;">
		         <div class = "form-group col-sm-12 col-xs-12">
		            <label class="col-xs-2" style="padding:6px 0 0 0;text-align:right;margin-right: 8px;">测试套件:</label>
		            <div class="" style="padding-right:0;">
		            <input type="text" class=" form-control" id="menu_parent_name"   style="width: 360px;"onfocus="this.blur()"placeholder="请选择测试套件">
<!-- 		            <input type="hidden" id="menu_parent" name="menu_parent"> -->
					<input type="hidden" id="menu_id" name="menu_id">
		         	</div>
		         </div>
	         </div>

	         <div class="row" style="margin:0;padding-right:10px;">
		         <div class = "form-group col-sm-12 col-xs-12">
		            <label class="col-xs-2" style="padding:6px 0 0 0;text-align:right;"><font color=red>*</font>名称:</label>
		            <div class="col-xs-10" style="padding-right:0;">
		            	<input type="text" class=" form-control" style="width:360px;" id="suiteName" name="suiteName" placeholder = "请输入初始化被克隆套件的名称" >
		         	</div>
		         </div>
	         </div>

	    </form>
		<div id="treediv" style="display: none;position:absolute;overflow:scroll;  width: 360px;height:200px;  padding: 5px;background: #fff;color: #fff;border: 1px solid #cccccc"  >
		</div>
	    
</div>

	<jsp:include page="../common/framework/script.jsp" />
	<script src="${pageContext.request.contextPath}/static/js/common/dtreeck.js"></script>
    <script type="text/javascript">

    var testsuiteId = parent.listTree_nodeId;
    var layerFlag = "";
  //给弹框添加回车提交事件
    $(function(){ 
    	$(document).keydown(function(event){ 
	    	if(event.keyCode==13){
	    		if(layerFlag == "cloneTestSuite"){
	    			saveCloneTestSuite();
	    		}else if(layerFlag == ""){
	    			submit();
	    		}
	    		
	    	} 
    	}); 
});

    $(function(){
    	/*表单验证  */
    	//表单验证
    		 $('#openAndEditTestSuiteForm').bootstrapValidator({
    	   		   message: 'This value is not valid',
    	           feedbackIcons: {
    	        	   valid:'glyphicon glyphicon-ok',
    	        	   invalid:'glyphicon glyphicon-remove',
    	        	   validating:'glyphicon glyphicon-refresh'
    	           },
    	           excluded: [':disabled'],
    	            fields: {
    	            	testsuiteName :{
    						message : '套件名称验证失败',
    						validators : {
    							notEmpty : {//非空验证：提示消息
    								message : '套件名称不能为空'
    							},
    							stringLength: {/*长度提示*/
    							    min: 1,
    							    max: 100,
    							    message: '套件名称长度必须在1到100个字之间'
    							   }
    						}
    					},
    					summary :{
    						message : '摘要验证失败',
    						validators : {
    							stringLength: {/*长度提示*/
    							    min: 1,
    							    max: 255,
    							    message: '摘要长度必须在1到255个字之间'
    							   }
    						}
    					}

    	               }
    	        });
    	
    		 $('#cloneTestSuiteForm').bootstrapValidator({
  	   		   message: 'This value is not valid',
  	           feedbackIcons: {
  	        	   valid:'glyphicon glyphicon-ok',
  	        	   invalid:'glyphicon glyphicon-remove',
  	        	   validating:'glyphicon glyphicon-refresh'
  	           },
  	           excluded: [':disabled'],
  	            fields: {
  	            	projectId :{
  						message : '项目验证失败',
  						validators : {
  							notEmpty : {//非空验证：提示消息
  								message : '项目不能为空'
  							}
  						}
  					},
  					testplanId :{
  						message : '测试计划验证失败',
  						validators : {
  							notEmpty : {//非空验证：提示消息
  								message : '测试计划不能为空'
  							}
  						}
  					},
  					suiteName :{
  						message : '套件名称验证失败',
  						validators : {
  							notEmpty : {//非空验证：提示消息
  								message : '套件名称不能为空'
  							},
  							stringLength: {/*长度提示*/
  							    min: 1,
  							    max: 100,
  							    message: '套件名称长度必须在1到100个字之间'
  							   }
  						}
  					}
  	               }
  	        });
    	})
  //初始化加载页面
	$(function(){

		getAuthUser();
		getTestSuite();
		getProjectByUser();
  });
	 //根据项目获取用户列表
	  function getAuthUser(){
	  	$.ajax({
	  	    type : "get",
	  	    async: false,
	  	    url : path+'/basic/getAuthUser4Project',//找到controller里相应的方法
	  	    beforeSend: function(XMLHttpRequest){

	      	},
	  	    success : function(dataList) {
	  	    	//加载报告人下拉列表
			    	$("#assignId").html("");
			    	$(dataList).each(function(index,data){
			    		$("#assignId").append("<option value="+data.userId+">"+data.userName+"</option>");
					});

	  	    },
	  	    complete: function(XMLHttpRequest, textStatus){


	      	}
	  	   });
	  };
  //测试套件编辑初始信息获取
    function getTestSuite(){
  	  console.log("testsuiteId: "+testsuiteId);
  	  	$.ajax({
  	  	    type : "get",
  	  	    async: false,
  	  	    url : path+'/testCaseController/getTestSuite?testsuiteId='+testsuiteId,//找到controller里相应的方法
  	  	    beforeSend: function(XMLHttpRequest){

  	      	},
  	  	    success : function(dataMap) {
  	  	    	console.log("dataMap: "+JSON.stringify(dataMap));
  	  	    	for(var key in dataMap){
  		    		if(key == "testsuiteId"){
  		    			$('#testsuiteId').val(dataMap[key]);
  		    			console.log($('#testsuiteId').val());
  		    		}else if(key == "name"){
  		    			$('#testsuiteName').val(dataMap[key]);
  	    			console.log($('#testsuiteName').val());
  		    		}else if(key == "assignId"){
  		    			$('#assignId').val(dataMap[key]);
  		    			console.log($('#assignId').val());
  		    		}else if(key == "state"){
  		    			$('#state').val(dataMap[key]);
  		    			console.log($('#state').val());
  		    		}else if(key == "summary"){
  		    			$('#summary').val(dataMap[key]);
  		    			console.log($('#summary').val());
  		    		}
  		    	}

  	  	    },
  	  	    complete: function(XMLHttpRequest, textStatus){


  	      	}
  	  	   });
  	  };


    //测试套件编辑页面的克隆按钮触发
    function cloneTestSuite(){
    	$("#projectId").val("");
    	projectOnchange();
    	$('#suiteName').val("");
    	$('#cloneTestSuiteForm').data('bootstrapValidator').resetForm(true);
    	layer.open({
    		type : 1,
    		title :'克隆测试套件',
    		fix : true,
    		scrollbar : false,
//     		maxmin: true, //开启最大化最小化按钮
    		area : [ '500px', '380px' ],
    		shift : 2,
    		content : $('#cloneTestSuiteHtml'),
    		btn:['确定','取消'],
    		success: function(layero, index){
    			if(!$('.layui-layer-title').has('span').length){
    				 $(".layui-layer-title").prepend("<span class='glyphicon glyphicon-th-large' ></span>&nbsp;");
    			 }
    			layerFlag = "cloneTestSuite";
    	  	},
    		end : function() {
    			layerFlag = "";
    		},
    		yes: function(index, layero){
    			saveCloneTestSuite();
    			
    		  },
    		btn2: function(index, layero){
    		    //按钮【按钮二】的回调
    		  },
    	});
    	};

    	//根据权限获取项目列表
    	function getProjectByUser(){
    		$.ajax({
			    type : "get",
			    async: false,
			    url : path+'/basic/getProjectByUser',//找到controller里相应的方法
			    beforeSend: function(XMLHttpRequest){

	        	},
			    success : function(dataList) {
			    	console.log("dataList: "+JSON.stringify(dataList));
    		    	//加载计划下拉列表
    		    	$("#projectId").html("<option value=''>请选择</option>");
    		    	$(dataList).each(function(index,data){
    		    		$("#projectId").append("<option value="+data.projectId+">"+data.projectName+"</option>");
    				});
			    },
			    complete: function(XMLHttpRequest, textStatus){


	        	}
			   });

    	};
    	//改变项目下拉框触发事件
    	function projectOnchange(){
    		var projectId = $('#projectId option:selected').val();
    		if(projectId == ""){
    			$('#testplanId').html("");
    			$('#menu_id').val("");
    			$('#menu_parent_name').val("");
    			document.getElementById("treediv").innerHTML = "";
    		}else{
    			listTestPlan(projectId);
    			$('#menu_id').val("");
    			$('#menu_parent_name').val("");
    			document.getElementById("treediv").innerHTML = "";
    		}


    	};
    	//查询项目下的测试计划
    	function listTestPlan(projectId){
    		$.ajax({
			    type : "get",
			    async: false,
			    url : path+'/testCaseController/listTestPlan?projectId='+projectId,//找到controller里相应的方法
			    beforeSend: function(XMLHttpRequest){

	        	},
			    success : function(dataList) {
			    	console.log("dataList: "+JSON.stringify(dataList));
    		    	//加载计划下拉列表
    		    	$("#testplanId").html("<option value=''>请选择</option>");
    		    	$(dataList).each(function(index,data){
    		    		$("#testplanId").append("<option value="+data.id+">"+data.name+"</option>");
    				});
			    },
			    complete: function(XMLHttpRequest, textStatus){


	        	}
			   });

    	};
    	//改变测试计划下拉框触发事件
    	function testPlanOnchange(){

    		var testplanId = $('#testplanId option:selected').val();
    		var testplanName = $('#testplanId option:selected').text();
    		if(testplanId == ""){
    			$('#menu_id').val("");
    			$('#menu_parent_name').val("");
    			document.getElementById("treediv").innerHTML = "";
    		}else{
    			$('#menu_id').val("");
    			$('#menu_parent_name').val("");
    			listTestSuite(testplanId,testplanName);
    		}

    	};


    	//根据测试计划查询测试套件
    	function listTestSuite(testplanId,testplanName){
			
			console.log("testplanId: "+testplanId);
    		$.ajax({
			    type : "get",
			    async: false,
			    url : path+'/testCaseController/listTestSuiteByTestPlanId?testplanId='+testplanId,//找到controller里相应的方法
			    beforeSend: function(XMLHttpRequest){

	        	},
			    success : function(dataList) {
			    	console.log("dataList11111: "+JSON.stringify(dataList));
			    	mydtree = new dTree('mydtree','imgmenu/','no','no');
// 			    	mydtree.add(testplanId,
// 							  -1,
// 							  testplanName,
// 							  "javascript:setvalue()",
// 							  testplanName,
// 							  "_self",
// 							  false);
					mydtree.add(testplanId,
							  -1,
							  "请选择节点",
							  "javascript:setvalue()",
							  "请选择节点",
							  "_self",
							  false);
    		    	//加载套件树形结构
    		    	$(dataList).each(function(index,data){
    		    		mydtree.add(data.id,
    		    				data.parentId,
    		    				data.name,
    		    				"javascript:setvalue('"+data.id+"','"+data.name+"')",
    		    				data.name,
    		    				'_self',
    		    				false);
    				});
    		    	document.getElementById("treediv").innerHTML = mydtree;
    		    	
			    },
			    complete: function(XMLHttpRequest, textStatus){


	        	}
			   });

    	};
    	//保存克隆测试套件触发事件
    	function saveCloneTestSuite(){
    		var bootstrapValidator = $("#cloneTestSuiteForm").data('bootstrapValidator').validate();
	    	if(bootstrapValidator.isValid()){
	    		var cloneParentId = "";
				if($("#testplanId").val() != ""){
					if($("#menu_id").val() != ""){
						cloneParentId = $("#menu_id").val();

					}else{
						cloneParentId = $("#testplanId").val();
					}

				}
				
				var params = {
						"testsuiteId": testsuiteId,
						"cloneProjectId": $("#projectId").val(),
						"cloneParentId" : cloneParentId,
						"cloneTestSuiteName":$('#suiteName').val()
				};
				console.log("params: "+JSON.stringify(params));
				$.ajax({
	    	        type : "post",
	    	        url :path+'/testCaseController/cloneTestSuite',//找到controller里相应的方法
	    	        data : params, //把数组的值赋给data，把上面的param改为data,这里就能直接去掉
	    	        dataType : "json",//根据数据类型选择text、jason等
	    	        success : function(data) {
	    	        	if(data.result == true){
	    	        		if($("#testplanId").val() == parent.$("#testplanId").val()){
	    	        			parent.testSuiteFreshFlag = 1;
	    	        		}
	    	        		layer.closeAll();
	    	        		toast.success('操作成功！','成功提示');
	    	        	}else{
	    	        		toast.error('操作失败！','失败提示');
	    	        	}

	    	        }
	    	       });

	    	}
			
    	};
    	//保存事件
    	function submit(){
    		var bootstrapValidator = $("#openAndEditTestSuiteForm").data('bootstrapValidator').validate();
    		if(bootstrapValidator.isValid()){
    			var params = {
    					"testsuiteId":$('#testsuiteId').val(),
    					"name":$('#testsuiteName').val(),
    					"assignId":$('#assignId').val(),
    					"state":$('#state').val(),
    					"summary":$('#summary').val()
    			};
//     			console.log("params: "+JSON.stringify(params));
    			$.ajax({
        	        type : "post",
        	        url :path+'/testCaseController/updateTestSuite',//找到controller里相应的方法
        	        data : params, //把数组的值赋给data，把上面的param改为data,这里就能直接去掉
        	        dataType : "json",//根据数据类型选择text、jason等
        	        success : function(data) {
        	        	console.log(data);
        	        	if(data.result == true){
        	        		parent.testPlan_left.testplanIdChange();
    		        		parent.layer.closeAll();
    		        		parent.toast.success('操作成功！','成功提示');
    		        	}else{
    		        		toast.error('操作失败！','失败提示');
    		        	}
        	        }
        	       });
        	}
			


    	}

    	
    	
    	
    	/*============== 树形结构下拉框开始================ */
    	
    	//生成弹出层的代码 
    	<!-- 弹出层-->
    	xOffset = 0;//向右偏移量
    	yOffset = 190;//向下偏移量
    	var toshow = "treediv";//要显示的层的id
    	var target = "menu_parent_name";//目标控件----也就是想要点击后弹出树形菜单的那个控件id
    	$("#"+target).click(function (){
    		$("#"+toshow)
    		.css("position", "absolute")
    		.css("left", $("#"+target).position().left+xOffset + "px")
    		.css("top", $("#"+target).position().top+yOffset +"px").show();
    	});
    
    	//判断鼠标在不在弹出层范围内
    	 function   checkIn(id){
    		var yy = 20;   //偏移量
    		var str = "";
    		var   x=window.event.clientX;   
    		var   y=window.event.clientY;   
    		var   obj=$("#"+id)[0];
    		if(x>obj.offsetLeft&&x<(obj.offsetLeft+obj.clientWidth)&&y>(obj.offsetTop-yy)&&y<(obj.offsetTop+obj.clientHeight)){   
    			return true;
    		}else{   
    			return false;
    		}   
    	  }   
    	//点击body关闭弹出层
    		$(document).click(function(){
    			var is = checkIn("treediv");
    			if(!is){
    				$("#"+toshow).hide();
    			}
    		});
    	<!-- 弹出层-->
    	//生成弹出层的代码
    	//点击菜单树给文本框赋值------------------菜单树里加此方法
    	function setvalue(id,name){
    		$("#menu_parent_name").val(name);
    		$("#menu_id").val(id);
    		$("#treediv").hide();
    		console.log("menu_id: "+$("#menu_id").val());
    	}
    	/*============== 树形结构下拉框结束================ */
    	
    	

    </script>
<jsp:include page="../common/framework/footer.jsp" />